<template>
  <div class="systemconfig-page page-main">
    <div class="table-toolbar">
      <add-button @click="add()" />
    </div>
    <g-table ref="tableRef" row-key="id" childrenColumnName="child" :columns="columns" :api="getPageList"
      :params="searchParams" />

    <systemconfigDetail v-model:visible="visible" :type="searchParams.type" :data="activeRow" @change="search(false)" />
  </div>
</template>

<script setup lang="tsx">
import { systemconfigDel, getPageList } from './api';
import type { Isystemconfig } from './entity';
import systemconfigDetail from './detail.vue';
import { CATE_TYPE } from "@/utils/constant";
const searchParams = reactive({
  type: CATE_TYPE[5].value,
  status: -1
})

let visible = $ref(false)

const { tableRef, columns, search } = useTable<Isystemconfig>([
  { title: '分类名称', dataIndex: 'name' },
  { title: '英文名称', dataIndex: 'url' },
  { title: '字段提示文字', dataIndex: 'title' },
  { title: '已关联的表单', dataIndex: 'extra' },
  { title: '启用状态', dataIndex: 'status' },

  {
    title: '操作',
    dataIndex: 'op',
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => add(record)}>编辑</table-button>
        <table-button onClick={() => toconfig(record)}>配置列表</table-button>
        <confirm-button danger onClick={() => remove(record)}>删除</confirm-button>
      </>
    )
  }
])

let activeRow = $ref<Partial<Isystemconfig>>({})
function add(row: Partial<Isystemconfig> = {}) {
  activeRow = { ...row }
  visible = true
}

function remove({ id }: Isystemconfig) {
  systemconfigDel(id as number).then(() => {
    AntMessage.success('已删除')
    search(false)
  })
}
</script>

<style lang="scss"></style>